<template>
  <div class="container">
    <div id="containCesium"></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, onUnmounted } from "vue";
const isLocal = window.location.origin.includes("localhost");

onMounted(() => {
  Promise.all([
    loadingScript("/Cesium/Cesium.js"),
    loadingScript("/js/agCIM-SDK-1.2.2.min.js"),
  ]).then(() => {
    initMap();
  });
});

const state = reactive({
  scriptTagArr: [],
});
function loadingScript(url: string) {
  return new Promise((resolve, reject) => {
    const script = document.createElement("script");
    script.src = url;
    script.async = false;
    script.onload = () => resolve(script);
    script.onerror = () => reject(new Error(`Failed to load script ${url}`));
    document.head.appendChild(script);
  });
}

async function initMap() {
  const viewer = await agcim.scene.mapInit.createMap("containCesium", {});

  //GeoScene影像服务

  let options = {
    url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/",
    spatialReference: { wkid: "3857" },
  };
  let agGeoSceneTileLayer = new agcim.layer.AgGeoSceneTileLayer(options);
  CIM.layerTree.add(agGeoSceneTileLayer);
  agGeoSceneTileLayer.loadDataPromise.then(() => {
    agGeoSceneTileLayer.zoomToLayer();
  });

//   CIM.viewer.flyTo(en);

  // 第一个WMTS图层（重庆电子地图-琉璃蓝）
  //   let options2 = {
  //     url: isLocal
  //       ? "https://221.7.85.102:28083/agserver1/agserver/gwc/service/wmts"
  //       : `${origin}/agserver1/agserver/gwc/service/wmts`,
  //     layerTable: "DZDT_SS_L18",
  //     tileMatrixSet: "EPSG:4326_DZDT_SS_L18",
  //   };
  //   let agWMTSLayer = new agcim.layer.AgWMTSLayer(options2); //调用WMTS图层
  //   CIM.layerTree.add(agWMTSLayer); //在底图上添加WMTS图层

  CIM.viewer.scene.camera.flyTo({
    //定位
    destination: Cesium.Cartesian3.fromDegrees(106.479506, 29.631498, 500), //kz 106.479506   29.631498
    orientation: {
      heading: Cesium.Math.toRadians(0),
      pitch: Cesium.Math.toRadians(-90),
      roll: 0,
    },
  });
}
onUnmounted(() => {
  //销毁实体
  CIM.viewer.entities.removeAll();
  // 销毁图层
  CIM.viewer.imageryLayers.removeAll();
  // 销毁数据源
  CIM.viewer.dataSources.removeAll();
  // 销毁图层树
  CIM.layerTree.removeAll();
  // 销毁场景中的所有图层
  CIM.viewer.scene.primitives.removeAll();
});
</script>

<style scoped lang="less">
.container {
  width: 100%;
  height: 100%;
  #containCesium {
    height: 100%;
    width: 100%;
    overflow: hidden;
  }
}
</style>
